<template>
  <div id="components-dropdown-demo-placement">
    <!-- <div class="icon-wrapper base-btn">
      <img src="~@/assets/gateway/iconHomepage.png" alt="" class="userHImg" srcset="" />
    </div> -->
    <div class="icon-wrapper base-btn">
      <post-select :popover-visible.sync="popoverVisible" />
    </div>
    <div class="icon-wrapper base-btn" @click="handleQrcode(false)">
      <BaseSvgIcon class="icon-item" icon="minWx" color="red" />
    </div>
    <div class="icon-wrapper base-btn" @click="handleQrcode(true)">
      <!-- <BaseSvgIcon class="icon-item" icon="Frame"/> -->
      <BaseSvgIcon class="icon-item" icon="app" color="red" />
    </div>
    <div class="icon-wrapper base-btn">
      <MessageIcon class="notice" />
    </div>
    <a-divider type="vertical" class="vertical" />
    <template>
      <a-dropdown placement="bottomRight">
        <div>
          <div class="icon-wrapper">
            <BaseSvgIcon style="margin-right: 0" class="icon-item" icon="user" color="red" />
          </div>
          <!--                     <ellipsis :length="15" :useTitle="true">{{ name }}</ellipsis>-->
          <span :title="name" style="max-width: 60px; margin-left: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">{{ name }}</span>
        </div>
        <a-menu slot="overlay" class="downContent">
          <a-menu-item @click="handlePassword">
            <span>修改密码</span>
          </a-menu-item>
          <a-menu-item @click="handleModifyAccount">
            <span>修改账号</span>
          </a-menu-item>
          <a-menu-item @click="handleOut">
            <span>退出</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <!-- <div class="postName-left" @click="isOperationalGuideline = true"><Ellipsis :length="7" tooltip>{{postName}}</Ellipsis></div> -->
    </template>
    <modalPsw :visible="psw.visible" @handleCancel="handleCancelPsw"></modalPsw>
    <modifyAccount :visible="modifyAccountVisible" @handleCancel="cancelModifyAccount"></modifyAccount>

    <BaseModal :visible="visible.isQrcode" width="650px" :title="showApp ? 'app下载二维码' : '微信扫码打开小程序'" @cancel="visible.isQrcode = false" :footer="null">
      <div class="qrcode-wrapper" v-if="showApp">
        <div class="code-container">
          <div class="code-item code-left">
            <VueQrcode :value="appDownloadUrl" :options="{ width: 250 }"></VueQrcode>
            <span class="code-tips">Android安装包</span>
          </div>
<!--          <div class="code-item code-right">-->
<!--            <VueQrcode :value="iosDownloadUrl" :options="{ width: 250 }"></VueQrcode>-->
<!--            <span class="code-tips">IOS安装包</span>-->
<!--          </div>-->
        </div>
<!--        <span class="tip-text">注：扫描二维码，即可下载APP（1.请使用手机浏览器扫描，勿用微信扫描；2.如是苹果手机，请下载后，到手机设置-通用-设备管理页面信任此应用后，方可进行使用）</span>-->
        <span class="tip-text">注：请使用手机自带浏览器，扫描二维码，进行<b style="color: red">普通下载</b>（1.勿用微信扫描；2.如果是苹果手机，请联系流程与数智管理部(樊麟)获取兑换码，至APP Store兑换下载）</span>
      </div>
      <div class="minQrcode-wrapper" v-else>
        <img src="~@/assets/indexPage/minQrcode.jpg" alt="" />
      </div>
    </BaseModal>
    <div></div>
    <!-- <OperationalGuidelineView v-if="isOperationalGuideline" @click="dialogFn" /> -->
  </div>
</template>

<script>
import { appDownloadUrl, iosDownloadUrl } from '@/config'
import BaseModal from '@/components/BaseModal'
import Vue from 'vue'
import modalPsw from '@/components/avatarDown/modalPsw' // 重置密码
import modifyAccount from '@/components/avatarDown/modifyAccount' // 重置密码
import VueQrcode from '@chenfengyuan/vue-qrcode'
import BaseSvgIcon from '@/components/BaseSvgIcon'
import { Ellipsis } from '@/components'
import MessageIcon from '@/layouts/messageIcon.vue'
import PostSelect from './PostSelect.vue'
// import OperationalGuidelineView from './OperationalGuidelineView.vue' // 操作指引查看

export default {
  name: 'AvatarDown',
  data() {
    return {
      showApp: true,
      iosDownloadUrl: iosDownloadUrl,
      appDownloadUrl: appDownloadUrl,
      name: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
      postId: JSON.parse(sessionStorage.getItem('ycloud-user_info')).currentPost.postId, // 岗位编号
      //密码重置
      psw: {
        visible: false
      },
      loading: {
        isLogout: false
      },
      visible: {
        isQrcode: false
      },
      modifyAccountVisible: false,
      isOperationalGuideline: false, // 操作指引弹窗显示参数
      popoverVisible: false
    }
  },
  components: {
    modalPsw,
    BaseModal,
    VueQrcode,
    Ellipsis,
    modifyAccount,
    MessageIcon,
    PostSelect
    // OperationalGuidelineView
  },
  computed: {
    userInfo() {
      return Vue.getAcloudProvider().getUserInfo()
    },
    postName() {
      let postsArr = JSON.parse(sessionStorage.getItem('postsList')) || []
      let postsObj = postsArr.find((item) => item.id === this.postId)
      let pname = postsObj?.pname.split('/')
      if (pname.length) {
        return pname[pname.length - 1]
      }
    }
  },
  methods: {
    handleQrcode(flag = true) {
      this.showApp = flag
      this.visible.isQrcode = true
    },
    handleOut() {
      if (this.loading.isLogout) {
        this.$message.info('退出中...')
        return
      }
      this.loading.isLogout = true
      Vue.getAcloudProvider().logout()
      this.loading.isLogout = false
    },
    handlePassword() {
      this.psw.visible = true
    },
    handleModifyAccount() {
      this.modifyAccountVisible = true
    },
    cancelModifyAccount(val) {
      console.log(val, 22222222)
      this.modifyAccountVisible = val
    },
    handleCancelPsw(val) {
      this.psw.visible = val
    },

    // 弹窗回调
    dialogFn(obj) {
      // console.log('567890', obj);
      this.isOperationalGuideline = false
    }
  }
}
</script>
<style lang="less" scoped>
.minQrcode-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrapper {
  display: flex;
  align-items: center;
}

.icon-item {
  font-size: 26px;
  margin-right: 12px;
}

.avatar-wrapper {
  margin-right: 0;
  width: 32px;
  height: 32px;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  .icon-img {
    width: 18px;
    height: 18px;
  }
}
</style>
<style lang="less" type="text/less">
.qrcode-wrapper {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .code-container {
    display: flex;

    .code-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
    }

    .code-left {
      margin-right: 20px;
    }
  }
}

#components-dropdown-demo-placement {
  position: relative;
  z-index: 999;
  height: 64px;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .ant-dropdown-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;

    .headerName {
      margin-left: 5px;
      line-height: 18px;
      word-wrap: break-word;
      max-width: 110px;
    }
  }
}

.downContent {
  line-height: 40px;
  text-align: center;
}

.postName-left {
  margin-left: 12px;
}
.userHImg {
  margin-right: 12px;
  width: 26px;
  height: 26px;
}

.notice {
  sup {
    margin-top: 0 !important;
    background-color: #eb5e67 !important;
  }
}
.vertical {
  height: 1.4rem;
}
</style>